.offline-ui, .offline-ui *, .offline-ui:before, .offline-ui:after,
	.offline-ui *:before, .offline-ui *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.offline-ui {
	display: none;
	position: fixed;
	background: white;
	z-index: 2000;
	margin: auto;
	top: 50px;
	left: 0;
	right: 0;
}

.offline-ui .offline-ui-content:before {
	display: inline;
}

.offline-ui .offline-ui-retry {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	display: none;
}

.offline-ui .offline-ui-retry:before {
	display: inline;
}

.offline-ui.offline-ui-up.offline-ui-up-5s {
	display: block;
}

.offline-ui.offline-ui-down {
	display: block;
}

.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-retry {
	display: block;
}

.offline-ui.offline-ui-down.offline-ui-reconnect-failed-2s.offline-ui-waiting .offline-ui-retry
	{
	display: none;
}

@
-webkit-keyframes offline-dropin { 0%{
	transform: translateY(0);
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	opacity: 0;
}

1%{
transform
:translateY(-800px)
;-webkit-transform
:translateY(-800px)
;-moz-transform
:translateY(-800px)
;-ms-transform
:translateY(-800px)
;-o-transform
:translateY(-800px)
;opacity
:
0;
}
2%{
transform
:translateY(-800px)
;-webkit-transform
:translateY(-800px)
;-moz-transform
:translateY(-800px)
;-ms-transform
:translateY(-800px)
;-o-transform
:translateY(-800px)
;opacity
:
1;
}
100%{
transform
:translateY(0)
;-webkit-transform
:translateY(0)
;-moz-transform
:translateY(0)
;-ms-transform
:translateY(0)
;-o-transform
:translateY(0)
;opacity
:
1;
}
}
@
-moz-keyframes offline-dropin { 0%{
	transform: translateY(0);
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	opacity: 0;
}

1%{
transform
:translateY(-800px)
;-webkit-transform
:translateY(-800px)
;-moz-transform
:translateY(-800px)
;-ms-transform
:translateY(-800px)
;-o-transform
:translateY(-800px)
;opacity
:
0;
}
2%{
transform
:translateY(-800px)
;-webkit-transform
:translateY(-800px)
;-moz-transform
:translateY(-800px)
;-ms-transform
:translateY(-800px)
;-o-transform
:translateY(-800px)
;opacity
:
1;
}
100%{
transform
:translateY(0)
;-webkit-transform
:translateY(0)
;-moz-transform
:translateY(0)
;-ms-transform
:translateY(0)
;-o-transform
:translateY(0)
;opacity
:
1;
}
}
@
-ms-keyframes offline-dropin { 0%{
	transform: translateY(0);
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	opacity: 0;
}

1%{
transform
:translateY(-800px)
;-webkit-transform
:translateY(-800px)
;-moz-transform
:translateY(-800px)
;-ms-transform
:translateY(-800px)
;-o-transform
:translateY(-800px)
;opacity
:
0;
}
2%{
transform
:translateY(-800px)
;-webkit-transform
:translateY(-800px)
;-moz-transform
:translateY(-800px)
;-ms-transform
:translateY(-800px)
;-o-transform
:translateY(-800px)
;opacity
:
1;
}
100%{
transform
:translateY(0)
;-webkit-transform
:translateY(0)
;-moz-transform
:translateY(0)
;-ms-transform
:translateY(0)
;-o-transform
:translateY(0)
;opacity
:
1;
}
}
@
-o-keyframes offline-dropin { 0%{
	transform: translateY(0);
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	opacity: 0;
}

1%{
transform
:translateY(-800px)
;-webkit-transform
:translateY(-800px)
;-moz-transform
:translateY(-800px)
;-ms-transform
:translateY(-800px)
;-o-transform
:translateY(-800px)
;opacity
:
0;
}
2%{
transform
:translateY(-800px)
;-webkit-transform
:translateY(-800px)
;-moz-transform
:translateY(-800px)
;-ms-transform
:translateY(-800px)
;-o-transform
:translateY(-800px)
;opacity
:
1;
}
100%{
transform
:translateY(0)
;-webkit-transform
:translateY(0)
;-moz-transform
:translateY(0)
;-ms-transform
:translateY(0)
;-o-transform
:translateY(0)
;opacity
:
1;
}
}
@
keyframes offline-dropin { 0%{
	transform: translateY(0);
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	opacity: 0;
}

1%{
transform
:translateY(-800px)
;-webkit-transform
:translateY(-800px)
;-moz-transform
:translateY(-800px)
;-ms-transform
:translateY(-800px)
;-o-transform
:translateY(-800px)
;opacity
:
0;
}
2%{
transform
:translateY(-800px)
;-webkit-transform
:translateY(-800px)
;-moz-transform
:translateY(-800px)
;-ms-transform
:translateY(-800px)
;-o-transform
:translateY(-800px)
;opacity
:
1;
}
100%{
transform
:translateY(0)
;-webkit-transform
:translateY(0)
;-moz-transform
:translateY(0)
;-ms-transform
:translateY(0)
;-o-transform
:translateY(0)
;opacity
:
1;
}
}
@
-webkit-keyframes offline-dropout { 0%{
	transform: translateY(0);
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
}

100%{
transform
:translateY(-800px)
;-webkit-transform
:translateY(-800px)
;-moz-transform
:translateY(-800px)
;-ms-transform
:translateY(-800px)
;-o-transform
:translateY(-800px)
;
}
}
@
-moz-keyframes offline-dropout { 0%{
	transform: translateY(0);
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
}

100%{
transform
:translateY(-800px)
;-webkit-transform
:translateY(-800px)
;-moz-transform
:translateY(-800px)
;-ms-transform
:translateY(-800px)
;-o-transform
:translateY(-800px)
;
}
}
@
-ms-keyframes offline-dropout { 0%{
	transform: translateY(0);
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
}

100%{
transform
:translateY(-800px)
;-webkit-transform
:translateY(-800px)
;-moz-transform
:translateY(-800px)
;-ms-transform
:translateY(-800px)
;-o-transform
:translateY(-800px)
;
}
}
@
-o-keyframes offline-dropout { 0%{
	transform: translateY(0);
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
}

100%{
transform
:translateY(-800px)
;-webkit-transform
:translateY(-800px)
;-moz-transform
:translateY(-800px)
;-ms-transform
:translateY(-800px)
;-o-transform
:translateY(-800px)
;
}
}
@
keyframes offline-dropout { 0%{
	transform: translateY(0);
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
}

100%{
transform
:translateY(-800px)
;-webkit-transform
:translateY(-800px)
;-moz-transform
:translateY(-800px)
;-ms-transform
:translateY(-800px)
;-o-transform
:translateY(-800px)
;
}
}
@
-webkit-keyframes offline-rotation { 0%{
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
}

100%{
transform
:rotate(359deg)
;-webkit-transform
:rotate(359deg)
;-moz-transform
:rotate(359deg)
;-ms-transform
:rotate(359deg)
;-o-transform
:rotate(359deg)
;
}
}
@
-moz-keyframes offline-rotation { 0%{
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
}

100%{
transform
:rotate(359deg)
;-webkit-transform
:rotate(359deg)
;-moz-transform
:rotate(359deg)
;-ms-transform
:rotate(359deg)
;-o-transform
:rotate(359deg)
;
}
}
@
-ms-keyframes offline-rotation { 0%{
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
}

100%{
transform
:rotate(359deg)
;-webkit-transform
:rotate(359deg)
;-moz-transform
:rotate(359deg)
;-ms-transform
:rotate(359deg)
;-o-transform
:rotate(359deg)
;
}
}
@
-o-keyframes offline-rotation { 0%{
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
}

100%{
transform
:rotate(359deg)
;-webkit-transform
:rotate(359deg)
;-moz-transform
:rotate(359deg)
;-ms-transform
:rotate(359deg)
;-o-transform
:rotate(359deg)
;
}
}
@
keyframes offline-rotation { 0%{
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
}

100%{
transform
:rotate(359deg)
;-webkit-transform
:rotate(359deg)
;-moz-transform
:rotate(359deg)
;-ms-transform
:rotate(359deg)
;-o-transform
:rotate(359deg)
;
}
}
.offline-ui {
	-webkit-border-radius: 0 0 2px 2px;
	-moz-border-radius: 0 0 2px 2px;
	-ms-border-radius: 0 0 2px 2px;
	-o-border-radius: 0 0 2px 2px;
	border-radius: 0 0 2px 2px;
	padding: 14px;
	width: 38em;
	max-width: 100%;
	overflow: hidden;
	z-index: 998;
}

@media ( max-width : 38em) {
	.offline-ui {
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		-ms-border-radius: 0;
		-o-border-radius: 0;
		border-radius: 0;
	}
}

.offline-ui .offline-ui-retry {
	position: absolute;
	right: 3em;
	top: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.1);
	text-decoration: none;
	color: inherit;
	line-height: 3.5em;
	height: 3.5em;
	margin: auto;
	padding: 0 1em;
}

.offline-ui.offline-ui-up {
	-webkit-animation: offline-dropout forwards 0.5s 2s;
	-moz-animation: offline-dropout forwards 0.5s 2s;
	-ms-animation: offline-dropout forwards 0.5s 2s;
	-o-animation: offline-dropout forwards 0.5s 2s;
	animation: offline-dropout forwards 0.5s 2s;
	-webkit-backface-visibility: hidden;
	background: #d6e9c6;
	color: #468847;
}

.offline-ui.offline-ui-down {
	-webkit-animation: offline-dropin 0.5s;
	-moz-animation: offline-dropin 0.5s;
	-ms-animation: offline-dropin 0.5s;
	-o-animation: offline-dropin 0.5s;
	animation: offline-dropin 0.5s;
	-webkit-backface-visibility: hidden;
	background: #ec8787;
	color: #551313;
}

.offline-ui.offline-ui-down.offline-ui-connecting, .offline-ui.offline-ui-down.offline-ui-waiting
	{
	background: #f8ecad;
	color: #7c6d1f;
	padding-right: 3em;
}

.offline-ui.offline-ui-down.offline-ui-connecting:after, .offline-ui.offline-ui-down.offline-ui-waiting:after
	{
	-webkit-animation: offline-rotation 0.7s linear infinite;
	-moz-animation: offline-rotation 0.7s linear infinite;
	-ms-animation: offline-rotation 0.7s linear infinite;
	-o-animation: offline-rotation 0.7s linear infinite;
	animation: offline-rotation 0.7s linear infinite;
	-webkit-backface-visibility: hidden;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	content: " ";
	display: block;
	position: absolute;
	right: 1em;
	top: 0;
	bottom: 0;
	margin: auto;
	height: 1em;
	width: 1em;
	border: 2px solid rgba(0, 0, 0, 0);
	border-top-color: #7c6d1f;
	border-left-color: #7c6d1f;
	opacity: 0.7;
}

.offline-ui.offline-ui-down.offline-ui-waiting {
	padding-right: 11em;
}

.offline-ui.offline-ui-down.offline-ui-waiting.offline-ui-reconnect-failed-2s
	{
	padding-right: 0;
}

.offline-ui .offline-ui-retry:before {
	content: "Reconnect";
}

.offline-ui.offline-ui-up .offline-ui-content:before {
	content: "Your computer is connected to the internet.";
}

@media ( max-width : 1024px) {
	.offline-ui.offline-ui-up .offline-ui-content:before {
		content: "Your device is connected to the internet.";
	}
}

@media ( max-width : 568px) {
	.offline-ui.offline-ui-up .offline-ui-content:before {
		content: "Your device is connected.";
	}
}

.offline-ui.offline-ui-down .offline-ui-content:before {
	content: "Your computer lost its internet connection.";
}

@media ( max-width : 1024px) {
	.offline-ui.offline-ui-down .offline-ui-content:before {
		content: "Your device lost its internet connection.";
	}
}

@media ( max-width : 568px) {
	.offline-ui.offline-ui-down .offline-ui-content:before {
		content: "Your device isn't connected.";
	}
}

.offline-ui.offline-ui-down.offline-ui-connecting .offline-ui-content:before,
	.offline-ui.offline-ui-down.offline-ui-connecting-2s .offline-ui-content:before
	{
	content: "Attempting to reconnect...";
}

.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="second"]:before
	{
	content: "Connection lost. Reconnecting in " attr(data-retry-in-value)
		" seconds...";
}

@media ( max-width : 568px) {
	.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="second"]:before
		{
		content: "Reconnecting in " attr(data-retry-in-value) "s...";
	}
}

.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="second"][data-retry-in-value="1"]:before
	{
	content: "Connection lost. Reconnecting in " attr(data-retry-in-value)
		" second...";
}

@media ( max-width : 568px) {
	.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="second"][data-retry-in-value="1"]:before
		{
		content: "Reconnecting in " attr(data-retry-in-value) "s...";
	}
}

.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="minute"]:before
	{
	content: "Connection lost. Reconnecting in " attr(data-retry-in-value)
		" minutes...";
}

@media ( max-width : 568px) {
	.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="minute"]:before
		{
		content: "Reconnecting in " attr(data-retry-in-value) "m...";
	}
}

.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="minute"][data-retry-in-value="1"]:before
	{
	content: "Connection lost. Reconnecting in " attr(data-retry-in-value)
		" minute...";
}

@media ( max-width : 568px) {
	.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="minute"][data-retry-in-value="1"]:before
		{
		content: "Reconnecting in " attr(data-retry-in-value) "m...";
	}
}

.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="hour"]:before
	{
	content: "Connection lost. Reconnecting in " attr(data-retry-in-value)
		" hours...";
}

@media ( max-width : 568px) {
	.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="hour"]:before
		{
		content: "Reconnecting in " attr(data-retry-in-value) "h...";
	}
}

.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="hour"][data-retry-in-value="1"]:before
	{
	content: "Connection lost. Reconnecting in " attr(data-retry-in-value)
		" hour...";
}

@media ( max-width : 568px) {
	.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="hour"][data-retry-in-value="1"]:before
		{
		content: "Reconnecting in " attr(data-retry-in-value) "h...";
	}
}

.offline-ui.offline-ui-down.offline-ui-reconnect-failed-2s.offline-ui-waiting .offline-ui-retry
	{
	display: none;
}

.offline-ui.offline-ui-down.offline-ui-reconnect-failed-2s .offline-ui-content:before
	{
	content: "Connection attempt failed.";
}